<template>
	<div class="certificatePerson" v-cloak>
		<div class="certificate_content">
			<a class="certificateImg" href="/index">
				<img :src="$parent.procedureConfig.logo2Url">
			</a>
			<div class="certificate_search_box text_center" :model="form" v-show="!isSearch">
				<h3 class="certificate_title">结业证书查询</h3>
				<ul class="cer_per_tab_ul">
					<li class="f_left certi_tab_active first">
						<router-link to="./person_certificate">个人查询</router-link>个人查询</a>
					</li>
					<li class="f_left">
						<router-link to="./company_certificate">企业查询</router-link>
					</li>
				</ul>
				<div class="cer_per_search_box text_left">
					<div class="certificate_select_box">
						<input type="text" class="cetificate_person_input color666" v-model.trim="form.identity" placeholder="请输入身份证号">
					</div>
					<button class="certificateBtn" @click="certiSearch(form)">搜索</button>
				</div>

			</div>
			<!-- 搜索没证书 -->
			<div class="certificate_result_box cer_per_result_no text_left" :model="form" v-show="isSearch&&searchLst.length<=0">
				<h3 class="certificate_search_title">查询结果</h3>
				<ul class="cer_per_tab_ul">
					<li class="f_left certi_tab_active">
						<router-link to="./person_certificate">个人查询</router-link>
					</li>
					<li class="f_left">
						<router-link to="./company_certificate">企业查询</router-link>
					</li>
				</ul>
				<div class="cer_per_search_box text_left">
					<div class="certificate_select_box">
						<input type="text" class="cetificate_person_input color666" v-model.trim="form.identity" placeholder="请输入身份证号">
					</div>
					<button class="certificateBtn" @click="certiSearch(form)">搜索</button>
				</div>
				<div class="cer_per_result_no_box">
					<div class="certificate_no_result" style="padding-top: 44px">
						<img src="../../../static/img/noimformation_02.png" width="147px" height="99px">
						<p>抱歉！当前的身份证没有可查询的信息~</p>
					</div>
				</div>
			</div>
			<!-- 搜索有证书 -->
			<div class="certificate_result_box text_left" :model="form" v-show="isSearch&&searchLst.length>0">
				<h3 class="certificate_search_title">查询结果</h3>
				<ul class="cer_per_tab_ul">
					<li class="f_left certi_tab_active">
						<router-link to="./person_certificate">个人查询</router-link>个人查询</a>
					</li>
					<li class="f_left">
						<router-link to="./company_certificate">企业查询</router-link>
					</li>
				</ul>
				<div class="cer_per_search_box text_left">
					<div class="certificate_select_box">
						<input type="text" class="cetificate_person_input color666" v-model.trim="form.identity" placeholder="请输入身份证号">
					</div>
					<button class="certificateBtn" @click="certiSearch(form)">搜索</button>
				</div>
				<div class="cer_per_result_no_box">
					<div class="certificate_no_result">
						<table width="100%" class="certificate_table">
							<thead>
								<tr>
									<td>证书编号</td>
									<td>报考专业</td>
									<td>结业时间</td>
									<td>查看证书</td>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in searchLst" :key="index">
									<td>{{item.diplomaNumber}}</td>
									<td>{{item.typeName}}</td>
									<td>{{new Date(item.studyEndTime).Format("YYYY-MM-DD hh:mm:ss")}}</td>
									<td>
										<a :href="item.diplomaUrl" target="_blank"> 查看证书</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'person_certificate',
		data() {
			return {
				form: {
					identity: ''
				},
				isSearch: false,
				searchLst: []
			}
		},
		created: function() {

		},
		mounted: function() {

		},
		methods: {
			certiSearch: function(data) {
				this.isSearch = true;
				var that=this;
				var identity = data.identity;
				if (identity == '' || identity.length != 18) {
					this.$message.error('请输入18位有效身份证号！！');
					return;
				}
				this.common.post(this.api.searchPersonCertificate, data, function(res) {
					that.searchLst = res.resultMap;
				});

			}
		}
	}
</script>

<style>
	.certificatePerson {
		background-image: url(../../../static/img/BG.png) !important;
		min-height: 100%;
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
	}
</style>
